<template>
  <div>
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
      style="text-align: left"
    >
      <el-form-item>
        <el-form-item label="设备名称">
          <el-input
            v-model="formInline.name"
            placeholder="请输入设备名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="设备状态">
          <el-select v-model="formInline.state" placeholder="请选择设备状态">
            <el-option label="请选择" value=""></el-option>
            <el-option label="在线" value="true"></el-option>
            <el-option label="不在线" value="false"></el-option>
          </el-select>
        </el-form-item>
        <el-button
          style="background-color: green; color: white"
          icon="el-icon-search"
          @click="list"
          >查询</el-button
        >
        <el-button style="color: gray" icon="el-icon-refresh">重置</el-button>
      </el-form-item>
    </el-form>
    <h2 style="text-align: left">门禁点总览</h2>

    <el-row>
      <el-col
        :span="8"
        v-for="(o, index) in tableData"
        :key="o.id"
        :offset="index > 0 ? 2 : 0"
      >
        <el-card :body-style="{ padding: '0px' }">
          <div style="padding: 14px">
            <h3>{{ o.name }}<span style="color: green">(运行中)</span></h3>
            <br />
            <el-divider></el-divider>
            <br />
            今日放行总人数<br /><b>{{ o.discharged }}</b>
            <br />
            二维码进入<br /><b>{{ o.enterinto }}</b>
            <br />
            刷新进入<br /><b>{{ o.face }}</b>
            <br />
            刷卡进入<br /><b>{{ o.swipingcard }}</b>
            <br />
            <div style="float: left">
              已授权人数：<span style="color: green">{{ o.accredit }}</span
              >人
            </div>
            <el-divider></el-divider>
            <el-button
              style="float: right; background-color: green; color: white"
              @click="examine"
              >查看详情</el-button
            >
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="formInline.pageIndex"
      :page-sizes="[1, 2, 3, 4]"
      :page-size="formInline.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="countnum"
    >
    </el-pagination>

    <el-dialog width="600px" title="详情信息" :visible.sync="dialogFormVisible">
      <el-form
        ref="form"
        :model="form"
        label-width="180px"
        style="width: 600px; margin: 2px auto"
      >
        <el-form-item label="设备编号" prop="password">
          {{ form.equipment }}
        </el-form-item>
        <el-form-item label="设备名称" prop="password">
          {{ form.name }}
        </el-form-item>
        <el-form-item label="设备类型" prop="password">
          {{ form.type }}
        </el-form-item>
        <el-form-item label="设备型号" prop="password">
          {{ form.model }}
        </el-form-item>
        <el-form-item label="设备品牌" prop="password">
          {{ form.brand }}
        </el-form-item>
        <el-form-item label="设备位置" prop="password">
          {{ form.detailedLocation }}
        </el-form-item>
        <el-form-item label="购买日期" prop="password">
          {{ form.date }}
        </el-form-item>
        <el-form-item label="负责人" prop="password">
          {{ form.principal }}
        </el-form-item>
        <el-form-item label="负责部门" prop="password">
          {{ form.mainteDepartId }}
        </el-form-item>
        <el-form-item label="设备状态" prop="password">
          {{ form.state }}
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { GetShowDeviceList, GetTotaocount } from "@/api/parkManage/DeviceList";
export default {
  data() {
    return {
      currentDate: new Date(),
      tableData: [],
      dialogFormVisible: false,
      multipleSelection: [],
      form: {
        id: "1",
        equipment: "YK21072811360706",
        name: "园区入口闸机01",
        type: "弱点系统",
        model: "Ty11",
        brand: "小华",
        detailedLocation: "园区入口",
        date: "2023-5-1",
        principal: "张三",
        mainteDepartId: "技术部",
        state: "在线",
      },
      formInline: {
        pageIndex: 1,
        pageSize: 2,
        name: "",
        state: "",
      },
      countnum: 0,
      count: 0,
    };
  },
  created() {
    this.list();
    this.totalcount();
  },
  methods: {
    //显示
    list() {
      GetShowDeviceList(this.formInline).then((res) => {
        this.tableData = res.data.data;
        this.count = res.data.totalCount;
      });
    },
    handleSizeChange(val) {
      this.formInline.pageSize = val;
      this.list();
    },
    handleCurrentChange(val) {
      this.formInline.pageIndex = val;
      this.list();
    },
    totalcount() {
      GetTotaocount().then((res) => {
        this.countnum = res.data;
      });
    },
    //全选/反选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //查看详情
    examine() {
      this.dialogFormVisible = true;
      this.multipleSelection.forEach((res) => {
        this.form = res;
      });
    },
  },
};
</script>
<style>
.el-table .warning-row {
  background: rgb(230, 253, 253);
}

.el-table .success-row {
  background: #f4ebf9;
}
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>